<template>
  <div>
    <div class="header">
      <span @click="fun()">&lt;</span>
      <span @click="fun()">x</span>
      <span>中国移动权益超市</span>
    </div>
    <div class="banner">
      <img src="img/zhangimg/zhongguoshihua/1.gif" alt="" />
    </div>
    <main>
      <h1>权益选择</h1>
      <img src="img/zhangimg/zhongguoshihua/2.gif" alt="" />
      <h1>支付方式</h1>
      <div class="box">
        <img src="img/zhangimg/zhongguoshihua/3.gif" alt="" />
        <span>话费支付</span>
        <input type="checkbox" />
      </div>
      <h1>权益说明</h1>
      <p>1. 产品订购及生效规则</p>
      <p>
        (1）订购成功后，将向手机号码所绑定的云闪付账号下发抵用
      券，具体到账时间以短信通知为准；
      </p>
      <p>
        （2）在活动时间内，每月权益超市抵用券抢购与权益包内本地票
      券权益领取、积分兑换本地票券兑换上限总计2次（西安公交抵用
      券、西安地铁抵用券、车点点洗车券除外），卡券数量有限，领 完即止。
      </p>
      <p>（3）同一身份证名下陕西移动号码，每月云闪付卡券核销上限总 计4次。</p>
      <p>（4）卡券活动和满减金额非长期有效，会根据营销活动进行调整，以领取详情页实际说明为主。</p>
      <p> 2. 产品有效时间核算</p>
      <p>
        收到抵用券下发成功短信后7日内需完成云闪付注册（云闪付老用
      户不需要），逾期作废；
      </p>
      <p>
        需使用实名注册并绑定境内发行的62开头银联实体卡进行支付，
      使用非62开头银联实体卡不能使用优惠券。
      </p>
      <p>卡券自订购成功之日起15日内有效，逾期作废。</p>
      <p> 3. 产品查看</p>
      <p>
        用户购买抵用券成功后，使用购买的手机号登录云闪付APP-我的。
      票券-我的票券查看抵用券到账情况。
      </p>
    </main>
    <div class="big-box">
      <div class="small-box">
        立即购买
      </div>
    </div>
    <div class="footer"></div>
  </div>
</template>

<script>
export default {
  methods: {
    fun() {
      this.$router.go(-1);
    },
  },
};
</script>

<style scoped>
.header {
  width: 3.6rem;
  height: 0.5rem;
  line-height: 0.5rem;
}
.header span:nth-child(1) {
  margin: 0.2rem 0.2rem 0 0.14rem;
  font-size: 0.25rem;
}
.header span:nth-child(2) {
  margin-right: 1rem;
  font-size: 0.25rem;
}
.header span:nth-child(3) {
  font-size: 0.18rem;
  font-weight: 900;
}
.banner {
  width: 100%;
  height: 1.49rem;
  text-align: center;
}
.banner img{
  width: 2.56rem;
  height: 1.36rem;
}
main {
  width: 3.6rem;
  height: 2.78rem;
  margin-left: 0.14rem;
  position: relative;
}
main h1 {
  width: 100%;
  height: 0.44rem;
  line-height: 0.44rem;
  font-size: 0.14rem;
}
main img{
  width: .94rem;
  height: 1.21rem;
}
main .box {
  width: 100%;
  height: 0.6rem;
  border-bottom: 2px dashed gray;
}
main .box img{
  width: .39rem;
  height: .39rem;
}
main .box span {
  display: block;
  float: right;
  margin-right: 2.5rem;
  margin-top: 0.1rem;
}
main .box input {
  position: absolute;
  top: 2.4rem;
  right: 0.2rem;
}
main p{
  font-size: .12rem;
}
.big-box{
  width: 100%;
  height: .76rem;
  background: #efefef;
  position: fixed;
  bottom: 0;
}
.big-box .small-box{
  width: 2.88rem;
  height: .44rem;
  background-color: #fd4d01;
  text-align: center;
  line-height: .44rem;
  border-radius: .2rem;
  position: absolute;
  top: .18rem;
  left: .5rem;
}
.footer{
  height: 5rem;
}
</style>